	.voice-mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 10070;
		transition: all 0.3s ease-in-out 0s;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		.voice-handle-operation-area{
			position: absolute;
			bottom: 0;
			height: 500rpx;
			width: 100%;
			.operation-area-main{
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.cancel-voice-button{
					height: 150rpx;
					width: 150rpx;
					border-radius: 50%;
					background-color: #767676;
					box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
					transform: scale(.9);
					display: flex;
					align-items: center;
					justify-content: center;
					&.cancel-button-hl{
						background-color: #e45656;
						transform: scale(1);
						box-shadow: rgba(#e75e58, 0.2) 0px 7px 29px 0px;
					}
				}
				.operation-tips{
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top:220rpx;
					color: #868686;
					font-size: 30rpx;
				}
			}
			.operation-area-play-button{
				position: absolute;
				bottom: -10%;
				left: 50%;
				transform: translateX(-50%) scale(.9);
				height: 260rpx;
				width: 130%;
				background: linear-gradient(to bottom, #646464, #959595);
				border-radius: 100% 100% 0rpx 0rpx;
				transition-duration: .2s;
				&.play-button-hl{
					transform: translateX(-50%) scale(1);
					background: linear-gradient(to bottom, #398ade, #3c9cff) !important;
				}
				.voice-icon{
					width: 40rpx;
					height:40rpx;
					position: absolute;
					top: 50rpx;
					left: 50%;
					transform: translateX(-50%) rotate(180deg);
				}
			}
		}
		.voice-message-container{
			width: 400rpx;
			height: 180rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%) translateY(-182rpx);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&::after{
				position: absolute;
				content:"";
			    width: 0;
			    height: 0;
			    border-left: 20rpx solid transparent;
			    border-right: 20rpx solid transparent;
			   
				bottom: 0;
				transform: translate(-50%,97%);
				left: 50%;
			}
			&.cancel{
				background-color: #e75e58;
				&::after{
					 border-top: 20rpx solid #e75e58;
				}
			}
			&.normal{
				background-color: #77bbff;
				&::after{
					 border-top: 20rpx solid #77bbff;
				}
			}
			.audio{
				width: 400rpx;
				height: 180rpx;
			}
		}
	}